$(function () {
  // 点击退出登录按钮绑定点击事件
  $('.logout').on('click', function () {
    // 询问用户是否退出登录
    layer.confirm('确认退出吗', {icon: 6, title:'提示'}, function(index){
      // 删除本地存储的token
      localStorage.removeItem('token')
      // 跳转到登录页面
      location.href = '/login.html'
      layer.close(index);
    });
  })

 
  // 调用函数
  init()

  

})


function text() {
  console.log('这是更新后');
}

 // 封装获取用户信息的函数
 function init() {
  // get请求获取用户基本信息
  axios.get('/my/userinfo'
    // 设置自定义请求头
    // headers: {
    //   Authorization: localStorage.getItem('token') 
    // }
  ).then(({ data: res }) => {
    console.log('成功了');
    console.log(res);
    // 调用渲染用户信息的函数
    inof(res.data)
  }, (error) => {
    console.log('失败了');
    console.dir(error);

    // 1.判断响应状态码是否等于401
    // 2.如果是,则清空token,并跳转到登录页面
    if (error.response.status === 401) {
      // 清空假token
      localStorage.removeItem('token')
      // 跳转到登录页面
      location.href = '/login.html'
    }
  })
}

// 封装渲染用户信息的函数
function inof(data) {

  // 获取用户输入的昵称和用户名
  let uname = data.nickname || data.username
 //  用户昵称.charAt(0) 表示获取索引值
 // .toUpperCase() 转换为大写
  let text = uname.charAt(0).toUpperCase()

 console.log(data)
 // 渲染头部区域的用户信息
 // 判断用户,是否有图片的头像,如果有执行if,没有执行else
 if (data.user_pic) {
   // 有图片的头像
   $('#header-avatar').html(`
   <img src="${data.user_pic}" class="layui-nav-img">
   个人中心
   `)
 } else {
   // 没有图片的头像,应该渲染"文本头像"
   $('#header-avatar').html(`
   <div class="text-avatar">${text}</div>
   个人中心
   `)
 }

 // 渲染侧边栏的用户信息
 if (data.user_pic) {
   // 渲染图片头像
   $('.user-info-box').html(`
   <img src="${data.user_pic}"
         class="layui-nav-img">
         <span class="welcome">&nbsp;欢迎&nbsp; ${uname}</span>
   `)
 } else {
   // 渲染文本头像
   $('.user-info-box').html(`
   <div class="text-avatar">${text}</div>
   <span class="welcome">&nbsp;欢迎&nbsp; ${uname}</span>
   `)
 }

 // 在页面元素动态生成好之后,调用layui提供的element.render()函数
 // 重新渲染指定区域的效果
 layui.element.render('nav','header-nav')
}


// 定义切换高亮的函数
function highlight(kw) {
  // console.log('切换高亮');
  // $('dd').removeClass('layui-this')
  $(`dd:contains('${kw}')`).addClass('layui-this').siblings().removeClass('layui-this')
}